<template>
	<div class='h-100 relative page-container'>
		<div id='logo'><img src='../assets/images/logo.png' /></div>
		<div id='bottom-company'>
			<div style='font-size:24px;'>为72亿人用电安全而奋斗</div>
			<div class='m-t-5'>www.gzzagx.com</div>
		</div>
		
		<div id='login-form' class='middle'>
			<div style='font-size:50px;text-align:center;color:#252525;'>登录</div>
			<div class='ctr-row'>
				<span class='pre middle'>账号</span>
				<input class='w-100' v-model='formData.account' type='text' />
				<i class='iconfont icon-login-user middle after'></i>
			</div>
			<div class='ctr-row'>
				<span class='pre middle'>密码</span>
				<input class='w-100' v-model='formData.password' type='password' />
				<i class='iconfont icon-login-password middle after'></i>
			</div>
			<div class='ctr-row'>
				<span class='pre middle'>角色</span>
				<el-select placeholder='' v-model='formData.role' class='w-100 role-select'>
					<el-option
						v-for="item in roles"
						:key="item.role"
						:label="item.name"
						:value="item.role">
					</el-option>
				</el-select>
			</div>
			<div class='m-t-50 text-center'>
				<button type='button' id='login-btn' @click='login'>确定</button>
			</div>
		</div>
		
		<!-- 禁用的弹窗 -->
		<el-dialog title='提示' :visible.sync='showForbiddenDiaLog' width='750px'>
			<div style='font-size:20px;text-align: center;'>
				<div>温馨提示</div>
				<div class='m-t-15'>当前账号已被禁用请联系客服</div>
				<div style='font-size:30px;margin-top:20px;font-weight:bold;color:#333;'>400-609-2088</div>
			</div>
			<div slot='footer' class='text-center'>
				<el-button style='width:460px;margin:auto;' type='primary' @click='showForbiddenDiaLog=false'>确 定</el-button>
			</div>
		</el-dialog>
		
		
	</div>
</template>
<script>
	import md5 from 'md5'
	import { Request, errorToast, successToast, setLoginToken, setUserInfo, setLoginExpire, setRefreshLoginToken, setUserRole, getUserRole, setAgentType, setLogoUrl } from '@/utils'
	let request = new Request()
	export default {
		data () {
			return {
				showForbiddenDiaLog : false,
				showPassword : false,
				formData : {
					role : 1,
					account : '',
					password : ''
				},
				
				roles : [
					{role : 1, name : '平台管理员'},
					{role : 2, name : '代理商'},
					{role : 3, name : '门店'}
				],
				
				rules : {
					account : { required: true, message: '请输入登录账号', trigger: 'blur' },
					password     : { required: true, message: '请输入登录密码', trigger: 'blur' }
				}
			}
		},
		methods : {
			login : function() {
				let formData = Object.assign({}, this.formData)
				if(formData.account === ''){
					errorToast('请输入登录账号', this)
					return
				}
				if(formData.password === ''){
					errorToast('请输入登录密码', this)
					return
				}
				
				formData.password = md5(formData.password)
				
				request.post('Login/login', res => {
					try{
						if(res.success){
							setLoginToken(res.data.token)
							setUserRole(formData.role)
							
							localStorage.setItem('login-account', formData.account)
							localStorage.setItem('prev-login-role', formData.role)
							this.$router.push({path : '/device'})
						}else{
							errorToast(res.msg, this)
						}
					}catch(e){
						alert(e.message)
					}
					
				}, formData)
			}
		},
		
		created () {
			let account = localStorage.getItem('login-account')
			if(account !== null){
				this.formData.account = account
			}
			
			let role = localStorage.getItem('prev-login-role')
			if(role !== null){
				this.formData.role = parseInt(role)
			}
			
		}
	}
	
</script>

<style lang='less'>
	.role-select .el-input__inner{
		border:none;
		border-radius:0;
		background:none;
		color:#999999;
		padding:0;
	}
</style>

<style lang='less' scoped>
	.w-1200{
		width:1200px;
		margin:0 auto;
	}
	
	.page-container{
		background:no-repeat center url(../assets/images/login-background.png);
		background-size:100% 100%;
	}
	
	#logo{
		position:absolute;
		top:50px;
		left:50px;
	}
	
	#bottom-company{
		position:absolute;
		bottom:50px;
		left:50px;
		color:#FFFFFF;
	}
	
	#login-form{
		position:absolute;
		right:20%;
		width:470px;
	}
	
	.ctr-row{
		border-bottom:1px solid #97999e;
		height:41px;
		padding:0 0px 0 70px;
		position:relative;
		margin-top:30px;
		input{
			height:100%;
			width:100%;
			border:none;
			color:#999999;
			background:none;
		}
		.pre {
			position:absolute;
			left:0;
			font-size:16px;
		}
		
		.after{
			position:absolute;
			right:5px;
			font-size:28px;
		}
	}
	
	#login-btn{
		width:150px;
		height:50px;
		border:1px solid #252525;
		padding:0;
		border-radius:25px;
		background:none;
		font-size:18px;
		color:#333333;
		cursor:pointer;
	}
	
</style>